<template>
	<view>
		<u-navbar back-text="返回" title="注册" :background="background"></u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" >
				<u-form-item label="用户名" prop="username" label-align="right"  :label-width="100">
					<u-input v-model="form.username" type="text" border />
				</u-form-item>
				<u-form-item label="昵称" prop="name" label-align="right" :label-width="100">
					<u-input v-model="form.name" type="text" border />
				</u-form-item>
				<u-form-item label="密码" prop="password" label-align="right" :label-width="100">
					<u-input v-model="form.password" type="password" border />
				</u-form-item>
			</u-form>
			<u-divider bg-color="#ddd" :margin-top="20"></u-divider>

			<view style="text-align: right;">
				<u-button type="primary" @click="register()" style="margin-top: 20upx;">注册</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					username:'',
					name:'',
					password:''
				},
				background:{
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				rules:{
					username: [
						{ 
							required: true, 
							message: '请输入用户名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					name: [
						{ 
							required: true, 
							message: '请输入昵称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					password: [
						{ 
							required: true, 
							message: '请输入密码', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		methods: {
			register(){
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if(valid) {
						this.$u.post('register',this.form).then(res=>{
							if(res.success){
								uni.redirectTo({
									url:'login'
								})
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style scoped>
.content {
	padding: 20upx;
}
.field {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 10upx;
}
.field>.label {
	width: 4em;
	text-align: right;
}


</style>
